<template>
  <div :id="id" style="height: 100%; width: 100%"></div>
</template>
<script>
const highcharts = window.Highcharts;
function fontChart(res) {
  const clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) {
    return;
  }
  // 此处的3840 为设计稿的宽度，记得修改！
  const fontSize = clientWidth / 1920;
  return res * fontSize;
}

export default {
  props: {
    id: {
      type: String,
      default() {
        return `Chart${Math.random()}`.replace('0.', '');
      },
    },
    dataList: {
      type: Array,
      default: () => [
        {
          name: '红草莓',
          y: 10254,
        },
        {
          name: '白草莓',
          y: 6894,
        },
        {
          name: '红颜草莓',
          y: 7667,
        },
        {
          name: '甜宝草莓',
          y: 4287,
        },
        {
          name: '红颜草莓',
          y: 8687,
        },
        {
          name: '甜宝草莓',
          y: 16112,
        },
      ],
    },
  },
  watch: {
    dataList() {
      this.$nextTick(() => {
        this.initOption();
      });
    },
  },
  mounted() {
    // this.$nextTick(() => {
    this.initOption();
    // });
    window.addEventListener('resize', this.initOption);
  },
  destroyed() {
    window.removeEventListener('resize', this.initOption);
  },
  methods: {
    initOption() {
      const max = Math.max(...this.dataList.map((item) => item.y));
      const min = Math.min(...this.dataList.map((item) => item.y));
      const gap = max - min;
      this.dataList.forEach((item) => {
        item.h = 10 + ((item.y - min) / gap) * 20;
      });
      // 修改3d饼图绘制过程
      var each = highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      highcharts.wrap(
        highcharts.seriesTypes.pie.prototype,
        'translate',
        function(proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          if (!this.chart.is3d()) {
            return;
          }
          var series = this,
            chart = series.chart,
            options = chart.options,
            seriesOptions = series.options,
            depth = seriesOptions.depth || 0,
            options3d = options.chart.options3d,
            alpha = options3d.alpha,
            beta = options3d.beta,
            z = seriesOptions.stacking
              ? (seriesOptions.stack || 0) * depth
              : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function(point) {
            var shapeArgs = point.shapeArgs,
              angle;
            point.shapeType = 'arc3d';
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad),
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad),
              ),
            };
          });
        },
      );
      (function(H) {
        H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function(
          proceed,
        ) {
          // Run original proceed method
          var ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      })(highcharts);
      highcharts.chart(this.id, {
        chart: {
          animation: false,
          backgroundColor: 'none',
          type: 'pie', //饼图
          margin: [0, 0, 0, 0],
          options3d: {
            enabled: true, //使用3d功能
            alpha: 58, //延y轴向内的倾斜角度
            beta: 0,
          },
          events: {
            load: function() {
              var each = highcharts.each,
                points = this.series[0].points;
              each(points, function(p) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran,
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran,
                });
              });
            },
          },
        },
        legend: {
          enabled: false, // 关闭图例
        },
        title: {
          // enabled: false,
          text: '',
        },
        subtitle: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          padding: 10,
          backgroundColor: 'rgba(0,28,66,0.93)',
          format: '{point.name}：{point.y}%',
          borderColor: 'rgba(255, 255, 255, 0.1)',
          style: {
            color: '#fff',
            fontSize: '12px',
            width: 100,
            overflow: 'break',
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: false, // 禁用点击
            cursor: 'pointer',
            depth: fontChart(15),
            showInLegend: true,
            size: '75%', // 外圈直径大小
            innerSize: fontChart(95), // 内圈直径大小
            center: ['50%%', '50%'],
            colors: [
              'rgb(235,147,39)',
              'rgb(234,219,54)',
              'rgb(12,214,137)',
              'rgb(25,234,219)',
              'rgb(13,145,239)',
              'rgb(167,67,234)',
            ],
            dataLabels: {
              useHTML: true,
              enabled: true, //是否显示饼图的线形tip
              distance: 1,
              borderColor: '#fff',
              align: 'center',
              position: 'right',
              format: '{point.y}%',
              color: '#ffffff',
              style: {
                textOutline: 'none',
                fontSize: '10px',
              },
            },
          },
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        series: [
          {
            type: 'pie',
            name: '占比',
            data: this.dataList,
          },
        ],
      });
    },
  },
};
</script>
